<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-dialog
          title="子任务详情"
          v-model="props.visible"
          width="85%"
          @close="closeDialog()"
        >
          <div>
            <el-button circle icon="Refresh" @click="refresh()" />
          </div>
          <el-table border v-loading="loading" :data="list">
            <el-table-column label="编号" prop="sortBy" width="50px" />
            <!-- <el-table-column label="手机号" prop="mobile" width="130px" /> -->
            <el-table-column
              label="库"
              prop="dbName"
              width="130px"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="表"
              prop="tableName"
              width="130px"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="key"
              prop="deleteKey"
              width="130px"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="状态" prop="executeStatus" width="100px">
              <template #default="scope">
                <el-tag
                  size="large"
                  type="success"
                  v-if="scope.row.executeStatus == 1"
                  style="width: 100%"
                >
                  OK
                </el-tag>
                <el-tag
                  size="large"
                  type="primary"
                  v-else-if="scope.row.executeStatus == 0"
                  style="width: 100%"
                >
                  执行中
                </el-tag>
                <el-tag
                  size="large"
                  type="danger"
                  v-else-if="scope.row.executeStatus == 2"
                  style="width: 100%"
                >
                  ERROR
                </el-tag>
                <el-tag size="large" type="warning" v-else style="width: 100%">
                  warning
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="sql"
              prop="querySql"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="日志"
              prop="content"
              :show-overflow-tooltip="true"
            />
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="params.pageNum"
            v-model:limit="params.pageSize"
            @pagination="reload()"
          />
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { kfOperateApi } from "@/api/kernel/kf-operate.js";

const emits = defineEmits(["update:visible"]);
const updateVisible = (value) => {
  emits("update:visible", value);
};

const props = defineProps({
  visible: Boolean,
  data: Object,
});
const loading = ref(true);

const params = ref({
  pageNum: 1,
  pageSize: 10,
  pid: "",
});
const total = ref(0);
const list = ref([]);
// #- 查询子任务列表
const reload = () => {
  kfOperateApi.getTaskPageList(params.value).then((res) => {
    console.log(res);
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
  });
};

const closeDialog = () => {
  updateVisible(false);
};

onMounted(() => {
  params.value.pid = props.data.id;
  reload();
});

const refresh = () => {
  reload();
};
</script>
